<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>自定义组件</title>
    <!-- 导入 Vue 3 -->
    <script src="https://unpkg.com/vue@next"></script>

    <!-- 导入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />

    <!-- 导入组件库 -->
    <script src="https://unpkg.com/element-plus"></script>
</head>

<body id="app">
    <fastchild @click="handleClick"></fastchild>
    <child @click="handleFatherClick"></child>
</body>
<script>
    const app = Vue.createApp({

        methods: {
            handleFatherClick() {
                console.log('test')
            },
            handleClick() {
                console.log("fasthandleClick click")
            }
        }
    })
    app.component("fastchild", {
        template: `
            <p>fasthandleClick</p>
       `
    });
    app.component("child", {
        methods: {
            handleChildClick() {
                console.log("child click")
            }
        },
        template: `
            <p @click="handleChildClick">child</p>
       `
    });
    app.use(ElementPlus);
    app.mount('#app');
</script>

</html>